import { useMemo, useState, useCallback } from "react"

//useMemo可以根据第二个依赖参数来决定是否要重新执行,依赖不变化的时候会缓存结果

const UseMemoCom = () => {
    let [count, setCount] = useState<number>(1)
    let [flag, setFlag] = useState<boolean>(false)

    let handleClick1 = () => {
        setCount(count + 1)
    }
    let handleClick2 = () => {
        setFlag(!flag)
    }

    //计算属性返回的是结果 缓存的是值
    let num = useMemo<number>(() => {
        console.log(count)
        return count + 20;
    }, [count])

    //useCallBack 缓存的是函数
    let cb = useCallback(() => {
        console.log(flag + "")
        return flag + ""
    }, [flag])

    // console.log(cb)

    return (
        <fieldset>
            <legend>计算属性</legend>
            <h1>{count}</h1>
            <h1>num:{num}</h1>
            <h2>cb:{cb()}</h2>
            <button onClick={handleClick1}>点击变更count</button>
            <button onClick={handleClick2}>点击变更flag</button>
        </fieldset>
    )
}
export default UseMemoCom